<template>
  <div class="app">
    <h1>{{ msg }}</h1>

    <!-- 通过父组件给子组件传递函数类型的props实现：子组件给父组件传递数据 -->
    <SchoolItem :getSchoolName="getSchoolName" />

    <!-- 通过父组件给子组件绑定一个自定义事件实现：子组件传递给父组件数据. (第一种写法，使用v-on)
    也可以通过自定义事件实现：给StudentItem组件的实例对象vc绑定一个自定义事件，
    事件名：clickStudent ,只要该事件被触发，就会调用 customEvent 方法
    -->
    <!-- <StudentItem v-on:customClick="getStudentName" /> -->

    <!-- 只会被触发一次 -->
    <!-- <StudentItem v-once:customClick="getStudentName" /> -->

    <!-- 通过父组件给子组件绑定一个自定义事件实现：子组件传递给父组件数据. (第二种写法 使用ref)-->
    <StudentItem ref="student" />
  </div>
</template>

<script>
import SchoolItem from "./components/SchoolItem.vue";
import StudentItem from "./components/StudentItem.vue";

export default {
  name: "App",
  data() {
    return {
      msg: "App Message",
    };
  },
  components: {
    SchoolItem,
    StudentItem,
  },
  methods: {
    getSchoolName(name) {
      console.log("App收到学校名称：", name);
    },
    // es6 接收多个形参
    getStudentName(value, ...params) {
      console.log(
        "studentItem 自定义事件被调用了",
        "App收到学生名称：",
        value,
        params
      );
    },
  },
  mounted() {
    // 可以更灵活的调用事件方法，比第一种方法灵活
    // setTimeout(() => {
    //   // 引用StudentItem 组件的实例对象，触发自定义事件
    //   this.$refs.student.$on("customClick", this.getStudentName);
    //   // 只会触发一次事件
    //   // this.$refs.student.$once("customClick", this.getStudentName);
    // }, 3000);

    // 绑定自定义事件
    this.$refs.student.$on("customClick", this.getStudentName);
    // 绑定自定义事件 只触发一次
    // this.$refs.student.$once("customClick", this.getStudentName);
  },
};
</script>

<style scoped>
.app {
  background-color: gray;
  padding: 5px;
}
</style>
